{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto;
        margin: 10px 0;
    }
    .dataTable {
        min-width: 800px;
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;
        white-space: nowrap;
        text-align: center;
    }
    .sortable {
        cursor: pointer;
        position: relative;
    }
    /* 列宽调整 */
    .col-categoryid { width: 10%; }
    .col-categoryname { width: 15%; }
    .col-parent { width: 15%; }
    .col-description { width: 30%; }
    .col-operate { width: 15%; }
</style>

<script>
    // 全选/取消全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selallCheckbox = document.getElementById('selall');
        const rowCheckboxes = document.querySelectorAll('input[name="ids"]');
        
        selallCheckbox.addEventListener('change', function() {
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = selallCheckbox.checked;
                if (checkbox.checked) {
                    checkbox.parentElement.classList.add('checked');
                } else {
                    checkbox.parentElement.classList.remove('checked');
                }
            });
        });
        
        rowCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateSelallStatus);
        });
        
        function updateSelallStatus() {
            const allChecked = Array.from(rowCheckboxes).every(checkbox => checkbox.checked);
            selallCheckbox.checked = allChecked;
            if (allChecked) {
                selallCheckbox.parentElement.classList.add('checked');
            } else {
                selallCheckbox.parentElement.classList.remove('checked');
            }
        }
    });

    function doDel(url) {
        if (confirm("确定要删除这个类别吗？")) {
            window.location.href = url;
        }
    }
</script>

<!-- 内容头部 -->
<section class="content-header">
    <h1>
        食物类别管理
        <small>食物类别列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">食物类别管理</a></li>
        <li class="active">食物类别列表</li>
    </ol>
</section>

<!-- 正文区域 -->
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">食物类别列表</h3>
        </div>
        <div class="box-body">
            <div class="table-box">
                <!-- 工具栏 -->
                <div class="pull-left">
                    <div class="form-group form-inline">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">
                                <a href="{% url 'myadmin_foodcategories_add' %}" style="color: inherit;"><i class="fa fa-plus"></i> 添加类别</a>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="box-tools pull-right">
                    <!-- 修改搜索框样式为与第二个附件一致 -->
                    <form method="get" action="{% url 'myadmin_foodcategories_index' 1 %}" class="input-group input-group-sm" style="width: 300px;">
                        <input type="text" name="keyword" class="form-control pull-right" 
                               placeholder="类别名称" 
                               value="{{ request.GET.keyword|default:'' }}">
                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                            {% if request.GET.keyword %}
                            <a href="{% url 'myadmin_foodcategories_index' 1 %}" class="btn btn-default"><i class="fa fa-times"></i></a>
                            {% endif %}
                        </div>
                    </form>
                </div>
                <!-- 工具栏/ -->

                <!-- 数据列表 -->
                <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                        <tr>
                            <th style="width: 5%; text-align: center;">
                                <div style="display: inline-flex; align-items: center; gap: 5px;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue" style="width: 16px; height: 16px;">
                                    <span style="font-size: 14px;">全选</span>
                                </div>
                            </th>
                            <th class="sortable col-categoryid">
                                <a href="?sort=category_id&order={% if request.GET.sort == 'category_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=category_id'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    类别ID{% if request.GET.sort == 'category_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable col-categoryname">
                                <a href="?sort=category_name&order={% if request.GET.sort == 'category_name' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=category_name'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    类别名称{% if request.GET.sort == 'category_name' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable col-parent">
                                <a href="?sort=parent_id&order={% if request.GET.sort == 'parent_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=parent_id'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    亲本类别{% if request.GET.sort == 'parent_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable col-description">
                                <a href="?sort=description&order={% if request.GET.sort == 'description' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=description'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    描述{% if request.GET.sort == 'description' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="col-operate">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for vo in categorylist %}
                        <tr>
                            <td><input name="ids" type="checkbox"></td>
                            <td>{{ vo.category_id }}</td>
                            <td>{{ vo.category_name }}</td>
                            <td>{{ vo.parent_id.category_name|default:'无' }}</td>
                            <td title="{{ vo.description|default:'' }}">{{ vo.description|truncatechars:20|default:'-' }}</td>
                            <td>
                                <a type="button" href="{% url 'myadmin_foodcategories_edit' vo.category_id %}" class="btn bg-primary btn-xs">
                                    <i class="fa fa-pencil"></i> 编辑
                                </a>
                                <a type="button" onclick="doDel('{% url 'myadmin_foodcategories_delete' vo.category_id %}')" class="btn bg-danger btn-xs">
                                    <i class="fa fa-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!-- 数据列表/ -->
            </div>

            <!-- 分页 -->
            <div class="box-footer">
                <div class="box-tools pull-right">
                    <ul class="pagination">
                        <li><a href="{% url 'myadmin_foodcategories_index' pIndex|add:-1 %}?{{ request.GET.urlencode }}">&laquo;</a></li>
                        {% for p in plist%}
                        <li {% if p == pIndex %}class="active"{% endif %}><a href="{% url 'myadmin_foodcategories_index' p %}?{{ request.GET.urlencode }}">{{p}}</a></li>
                        {% endfor %}
                        <li><a href="{% url 'myadmin_foodcategories_index' pIndex|add:1 %}?{{ request.GET.urlencode }}">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}